@import "../base/base.scss";

@import "icons/fontello.scss";
@import "fonts/open-sans.scss";
@import "keyframes.scss";

/* TODO move common mixins to base theme */
@import "mixins.scss";

/* TODO move new loading indicator to base when it's ready */
@import "loading-indicator.scss";

@import "common.scss";

/* TODO move new notification theme to base as the default when they are ready */
@import "components/notification.scss";
@import "components/button.scss";
@import "components/textfield.scss";
@import "components/combobox.scss";
@import "components/tabsheet.scss";
@import "components/label.scss";
@import "components/table.scss";
@import "components/window.scss";

@import "views/schedule.scss";
@import "views/sales.scss";
@import "views/reports.scss";
@import "views/transactions.scss";


@mixin oa {

  @include base;

  @include oa-loading-indicator;
  @include oa-common;

  @include oa-button;
  @include oa-combobox;
  @include oa-label;
  @include oa-notification;
  @include oa-table;
  @include oa-tabsheet;
  @include oa-textfield;
  @include oa-window;

  @include oa-schedule-view;
  @include oa-sales-view;
  @include oa-reports-view;
  @include oa-transactions-view;


  .v-view {
    overflow: hidden;
  }

  &.v-app {
    background: #353637;
  }

  &.v-app[id*="overlays"] {
    height: 0;
  }


  .login-bg {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: #353637;

    /* TODO mixin */
    background: -moz-radial-gradient(center, ellipse cover, #4c4d4e 0%, #303131 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#4c4d4e), color-stop(100%,#303131));
    background: -webkit-radial-gradient(center, ellipse cover, #4c4d4e 0%,#303131 100%);
    background: -o-radial-gradient(center, ellipse cover, #4c4d4e 0%,#303131 100%);
    background: -ms-radial-gradient(center, ellipse cover, #4c4d4e 0%,#303131 100%);
    /* 	background: radial-gradient(ellipse at center, #4c4d4e 0%,#303131 100%); */

    opacity: 0;

    /* TODO mixin */
    -webkit-transition: opacity 300ms linear;
    -moz-transition: opacity 300ms linear;
    transition: opacity 300ms linear;

    @include fade-in;
  }

  .main-view,
  .login-layout {
    position: relative;
    z-index: 2;
  }

  div.login-panel {
    @include move-up-100;
  }

  .login-panel {
    background: #fff;
    @include border-radius(4px);
    @include box-shadow(0 4px 20px rgba(0,0,0,.5));
    padding: 1em 1em 2em;
  }

  .login-panel .labels,
  .login-panel .fields {
    display: block;
  }

  .login-panel .v-textfield {
    width: 150px;
  }

  .login-panel .h2 {
    padding: 0;
    font-size: 20px;
    color: #c4cacf;
    letter-spacing: -0.05em;
  }

  .login-panel .error {
    font-size: 13px;
    height: 20px;
    padding-left: 14px;
  }


  .v-animate-reveal {
    @include reveal;
  }

  .v-animate-hide {
    @include hide;
  }


  .login .login-bg {
    opacity: 1;
  }


  .sidebar {
    background: #414243 url(img/sidebar-gradient.png) repeat-y top right;
    @include move-right;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .sidebar .branding {
    border-bottom: 1px solid #353637;
    position: relative;
    -webkit-font-smoothing: antialiased;
  }

  .sidebar .branding .v-label {
    position: relative;
    z-index: 2;

    white-space: normal;
    font-size: 16px;
    line-height: 1.1;
    color: #fff;
    text-shadow: 0 2px 2px rgba(0,0,0,.5);

    /* WTH? Why is inline-block forced as an inline style? */
    display: block !important;
    padding: .8em .8em 1.2em;

    //@include box-shadow(inset 0 0 5px 2px rgba(0,0,0,.5));
  }

  .sidebar .branding .v-label span {
    font-size: 13px;
    color: #d0d1d3;
    display: block;
  }

  .sidebar .branding .v-image {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
  }

  .sidebar .menu {
    overflow: auto;
    height: 100%;
  }

  .sidebar .menu .v-ddwrapper {
    padding: 2px;
  }

  .sidebar .menu .v-ddwrapper .v-nativebutton {
    margin: -2px -2px;
  }

  .sidebar .menu .v-ddwrapper-over {
    padding: 0;
    border: 2px solid #2d90f3;
    background: transparent;
    @include border-radius(4px);
  }

  .sidebar .menu .v-nativebutton {
    /* TODO mixin */
    -webkit-appearance: none;

    display: block;
    padding: 10px 14px 10px;
    width: 100%;
    border: none;
    margin: 0;
    position: relative;

    border-top: 1px solid #4b4c4d;
    border-top-color: rgba(255,255,255,.05);

    border-bottom: 1px solid #353637;
    border-bottom-color: rgba(0,0,0,.18);

    background: transparent;

    color: #888a8c;
    font-weight: normal;
    text-shadow: 0 1px 0 rgba(0,0,0,.5);
    text-align: center;

    /* TODO mixin */
    /* 		-webkit-transition: color ease-in-out 100ms, background-color linear 60ms; */
    /* 		-moz-transition: color ease-in-out 100ms, background-color linear 60ms; */
    /* 		transition: color ease-in-out 100ms, background-color linear 60ms; */
  }

  .sidebar .menu:after {
    content: "";
    display: block;
    border-top: 1px solid #4b4c4d;
    border-top-color: rgba(255,255,255,.05);
    height: 0;
  }

  .sidebar .menu .v-nativebutton-caption {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    display: block;
    margin: .2em 0 0 0;
  }

  .sidebar .menu .v-nativebutton:focus {
    outline: none;
  }

  .sidebar .menu .v-nativebutton:hover,
  .sidebar .menu .v-nativebutton:focus {
    color: #e1e1e1;
  }

  .sidebar .menu .v-nativebutton:before {
    font-size: 24px;
    line-height: 1;
    margin: 0;
  }

  .v-webkit & .menu .v-nativebutton:before {
    /* TODO mixin */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e8e8e8), color-stop(100%,#d3d3d3));
    background: -webkit-linear-gradient(top, #fff 0%,#777 100%);
    /* 	background: linear-gradient(to bottom, #e8e8e8 0%,#d3d3d3 100%); */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 1px 1px rgba(0,0,0,.2);
    opacity: .5;

    /* TODO mixin */
    -webkit-transition: opacity ease-in-out 200ms;
    -moz-transition: opacity ease-in-out 200ms;
    -ms-transition: opacity ease-in-out 200ms;
    -o-transition: opacity ease-in-out 200ms;
    transition: opacity ease-in-out 200ms;
  }

  .v-webkit & .menu .v-nativebutton:hover:before,
  .v-webkit & .menu .v-nativebutton:focus:before {
    opacity: 1;
  }

  .sidebar .menu .v-nativebutton:active {
    background: rgba(0,0,0,.1);
  }

  .sidebar .menu .v-nativebutton.selected {
    color: #e1e1e1;
    text-shadow: 0 2px 2px rgba(0,0,0,.5);

    border-top-color: #262729;
    border-bottom-color: #2b2c2e;

    background: #333537;

    /* TODO mixin */
    background: -moz-linear-gradient(top, #2d2f30 0%, #333537 10%, #333537 90%, #2d2f30 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2d2f30), color-stop(10%,#333537), color-stop(90%,#333537), color-stop(100%,#2d2f30));
    background: -webkit-linear-gradient(top, #2d2f30 0%,#333537 10%,#333537 90%,#2d2f30 100%);
    background: -o-linear-gradient(top, #2d2f30 0%,#333537 10%,#333537 90%,#2d2f30 100%);
    background: -ms-linear-gradient(top, #2d2f30 0%,#333537 10%,#333537 90%,#2d2f30 100%);
    /* 	background: linear-gradient(to bottom, #2d2f30 0%,#333537 10%,#333537 90%,#2d2f30 100%); */

    -webkit-transition: none;
  }

  .v-webkit & .menu .v-nativebutton.selected:before {
    text-shadow: none;
    opacity: 1;
  }

  .badge,
  .notifications .v-button-caption {
    display: inline-block;
    font-size: 11px;
    line-height: 1;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    padding: .1em .4em .2em;

    background: #f16433;

    /* TODO mixin */
    background: -moz-linear-gradient(top, #faa290 0%, #f77b62 14%, #ec3120 87%, #ce2314 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#faa290), color-stop(14%,#f77b62), color-stop(87%,#ec3120), color-stop(100%,#ce2314));
    background: -webkit-linear-gradient(top, #faa290 0%,#f77b62 14%,#ec3120 87%,#ce2314 100%);
    background: -o-linear-gradient(top, #faa290 0%,#f77b62 14%,#ec3120 87%,#ce2314 100%);
    background: -ms-linear-gradient(top, #faa290 0%,#f77b62 14%,#ec3120 87%,#ce2314 100%);
    /* Sass compiler chokes on this */
    /* background: linear-gradient(to bottom, #faa290 0%,#f77b62 14%,#ec3120 87%,#ce2314 100%); */

    @include border-radius(2px);

    @include box-shadow(0 1px 1px rgba(0,0,0,.3));
  }

  .menu .v-nativebutton .badge {
    position: absolute;
    top: 6px;
    right: 8px;
  }




  .sidebar .user {
    display: block;

    border-top: 1px solid #303132;
    background: #3b3c3d;
    background-color: rgba(0,0,0,.1);

    color: #898c8e;
    text-shadow: 0 1px 1px rgba(0,0,0,.5);

    @include box-shadow(inset 0 1px 0 rgba(255,255,255,.08));
  }

  .sidebar .user > .v-slot {
    display: inline-block;
    width: 50%;
  }

  .sidebar .user > .v-slot:first-child {
    width: 34px;
  }

  .sidebar .user .v-image {
    width: 34px;
    height: 34px;
    border-right: 1px solid #313132;
  }

  .sidebar .user .v-label {
    white-space: normal;
    font-size: 12px;
    line-height: 14px;
    font-weight: 600;
    max-width: 50px;
    overflow: visible;
    padding: 2px 8px;
    height: 34px;
    color: inherit;
    -webkit-font-smoothing: antialiased;
  }

  .sidebar .user .v-nativebutton,
  .sidebar .user .v-menubar {
    /* TODO mixin */
    -webkit-appearance: none;

    border: none;
    border-top: 1px solid #303132;
    background: transparent;
    width: 100%;
    padding: 0;

    color: inherit;
  }

  .sidebar .user .v-nativebutton:focus {
    outline: none;
  }

  .sidebar .user .v-nativebutton:hover,
  .sidebar .user .v-menubar-menuitem:hover {
    color: #e1e1e1;
  }

  .sidebar .user .v-nativebutton-caption {
    display: none;
  }

  .sidebar .user .v-nativebutton:before,
  .sidebar .user .v-menubar-menuitem:before {
    font-size: 16px;
    margin: 0;
    display: block;
    border-top: 1px solid #434445;
    padding: .3em 0 .4em;
  }

  .sidebar .user .v-menubar-menuitem {
    border-right: 1px solid #434445;
    display: block !important;
    cursor: pointer;
  }

  .sidebar .user .icon-cancel {
    border-left: 1px solid #303132;
  }


  .layout-panel {
    background: #fff;
    @include border-radius(4px);
    /* TODO make this work in the Sass compiler */
    /* 	@include box-shadow(0 2px 3px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.07)); */
    -webkit-box-shadow: 0 2px 3px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.07);
    -moz-box-shadow: 0 2px 3px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.07);
    box-shadow: 0 2px 3px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.07);
  }

  .v-ie8 & .layout-panel {
    border: 1px solid #d8d9d9;
  }


  .main-view {
    @include fade-in;
  }

  .view-content {
    overflow: visible;
  }

  .main-view {
    background: #fff;
  }




  .help-overlay {
    @include border-radius(2px);
    @include box-shadow(0 3px 10px rgba(0,0,0,.5));
    padding: 15px 20px;
    background: #464646;
    background-color: rgba(40,40,40,.85);
    text-shadow: 0 1px 1px rgba(0,0,0,.5);
    color: #a6a9aa;
    font: $font;
    font-size: 12px;

    @include fade-in;

    opacity: 0;
    @include animation-duration(1500ms);
    @include animation-delay(2000ms);
    @include animation-fill-mode(forwards);

    max-width: 50em;

    .v-window-outerheader {
      padding: 0;
      color: #fff;
      font-size: 14px;
      line-height: 1;
    }

    .v-window-header {
      font-weight: normal;
      overflow: visible;
    }

    .v-window-footer {
      height: 0;
    }

    .v-window-closebox {

    }

    .v-label p {
      margin: 7px 0 0 0;
    }

    a {
      color: #a6a9aa;
      text-decoration: underline;
    }

  }



  .help-overlay.login {
    top: auto !important;
    bottom: 20px;
  }



  .oa-view .v-horizontallayout {
    padding: 0 20px 20px;
  }

  .oa-view .v-spacing {
    width: 20px;
    height: 20px;
  }

  .oa-view .toolbar .v-spacing {
    width: 10px;
  }


  .oa-view .v-csslayout {
    padding: 50px 20px 0;
    overflow: auto;
    position: relative;
  }

  .oa-view .v-caption {
    font-weight: 600;
    font-size: 13px;
    color: #349aff;
    text-transform: uppercase;
    padding: 0 20px;
    line-height: 38px;
    border-bottom: 1px solid #eee;

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }

  .oa-view .configure {
    position: absolute;
    z-index: 1;
    top: 9px;
    right: 5px;
  }

  .oa-view .notes {
    padding: 40px 0 0;
  }

  .oa-view .notes .v-caption {
    color: #fff;
    text-shadow: 0 1px 1px #000;
    background: #5d6167;
    background: -moz-linear-gradient(top, #5d6167 0%, #393939 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5d6167), color-stop(100%,#393939));
    background: -webkit-linear-gradient(top, #5d6167 0%,#393939 100%);
    background: -o-linear-gradient(top, #5d6167 0%,#393939 100%);
    background: -ms-linear-gradient(top, #5d6167 0%,#393939 100%);
    /* background: linear-gradient(to bottom, #5d6167 0%,#393939 100%); */
  }

  .oa-view .notes .v-textarea {
    border: none;
    padding: 20px 20px 0;
    line-height: 20px;
    background: #fffdf2 url(img/notes-bg.png) repeat;
    color: #545145;
  }

  .oa-view .notes .v-textarea:focus {
    outline: none;
  }

  .oa-view .notes .configure {
    color: #ddd;
    text-shadow: 0 1px 1px #000;
  }

  .oa-view .toolbar {
    padding: 20px;
    text-shadow: 0 1px 1px rgba(255,255,255,.5);
    background: transparent;
  }

  .oa-view .toolbar .v-button {
    position: relative;
    font-size: 16px;
  }

  .oa-view .toolbar .notifications.unread .v-button-caption {
    display: block;
    position: absolute;
    top: 2px;
    right: 3px;
  }

  .oa-view .h1 {
    padding-right: 1em;
  }

  .oa-view {
    background: #dfe0e1;

    /* TODO mixin */
    background: -moz-linear-gradient(top, #d8d9da 0%, #e6e7e8 10%, #e0e1e2 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d8d9da), color-stop(10%,#e6e7e8), color-stop(100%,#e0e1e2));
    background: -webkit-linear-gradient(top, #d8d9da 0%,#e6e7e8 10%,#e0e1e2 100%);
    background: -o-linear-gradient(top, #d8d9da 0%,#e6e7e8 10%,#e0e1e2 100%);
    background: -ms-linear-gradient(top, #d8d9da 0%,#e6e7e8 10%,#e0e1e2 100%);
    /* 	background: linear-gradient(to bottom, #d8d9da 0%,#e6e7e8 10%,#e0e1e2 100%); */
  }

  .notifications.v-window {
    margin-top: 45px !important;
    margin-left: -193px !important;
    font-size: 13px;
  }

  .notifications.v-window .v-widget {
    font-size: 13px;
  }

  .notifications.v-window::before {
    content: "";
    position: absolute;
    top: -14px;
    right: 80px;
    border: 7px solid #fff;
    width: 0;
    height: 0;
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    margin-left: -7px;
  }

  .notifications.v-window .v-window-outerheader {
    font-size: 16px;
    color: #f16433;
    line-height: 25px;
    padding-left: 14px;
  }

  .notifications.v-window .v-label span {
    font-size: 12px;
    color: #979699;
  }

  .notifications.v-window .v-label hr {
    height: 0;
    border: none;
    border-top: 1px solid #ddd;
    margin: 0 -12px 12px;
  }

  .v-formlayout-captioncell {
    vertical-align: top;
  }

  .edit-oa .v-formlayout {
    padding: 10px 8px;

    .v-formlayout-captioncell {
      vertical-align: middle;
    }
  }

}